<template>
  <div class="carlist">
    <el-container>
      <el-header>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="车牌号码:">
            <el-input
              type="text"
              v-model="form1.carNumber"
              placeholder="请输入车牌号码"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="车辆类型：">
            <el-select
              v-model="getTypeList1.id"
              placeholder="请选择车辆类型"
              size="small"
            >
              <el-option
                v-for="item in getTypeList1"
                :key="item.id"
                :label="item.typeName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态：">
            <el-select
              ref="status"
              v-model="arr.status"
              placeholder="请选择状态"
              size="small"
            >
              <el-option
                :key="item.id"
                v-for="item in arr"
                :label="item.label"
                :value="item.status"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              class="detail"
              @click="chaxun"
              icon="el-icon-search"
              size="mini"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              class="rePassword"
              @click="chongzhi"
              icon="el-icon-refresh-right"
              size="mini"
              >重置</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              class="addUser"
              @click="dialogFormVisible1 = true"
              icon="el-icon-plus"
              size="mini"
              >新增车辆</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 新增车辆对话框 -->
        <el-dialog
          title="新增车辆信息"
          :visible.sync="dialogFormVisible1"
          width="30%"
          center
        >
          <el-form :model="xz" label-width="100px">
            <el-form-item label="车辆号码">
              <el-input autocomplete="off" v-model="xz.carNumber"></el-input>
            </el-form-item>
            <el-form-item label="车辆类型">
              <el-select v-model="getTypeList1.id" placeholder="请选择车辆类型">
                <el-option
                  v-for="item in getTypeList1"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="载重">
              <el-input v-model="xz.capacity" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="发动机号">
              <el-input v-model="xz.engineNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="选择状态">
              <el-select
                ref="status"
                v-model="arr.status"
                placeholder="请选择状态"
              >
                <el-option
                  :key="item.id"
                  v-for="item in arr"
                  :label="item.label"
                  :value="item.status"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="xz.comment" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="xinzeng">确定</el-button>
          </div>
        </el-dialog>
      </el-header>
      <el-main>
        <!-- <div @mouseover="mouseOver" @mouseleave="mouseLeave" :style="active">
          <span v-if="count">已选择{{ count }}项</span>&nbsp; &nbsp;&nbsp;&nbsp;
          <el-button type="text" @click="qingkong">清空</el-button>
        </div> -->
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :row-style="{ height: '60px' }"
          stripe
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="车牌号码" width="120" prop="carNumber">
          </el-table-column>
          <el-table-column prop="carType" label="车辆类型" width="120">
          </el-table-column>
          <el-table-column prop="capacity" label="载重" width="120">
          </el-table-column>

          <el-table-column
            prop="engineNumber"
            label="发动机号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态 "
            :formatter="show"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="comment" label="备注" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                size="mini"
                class="rePassword"
                @click="Delete(scope.$index, scope.row, scope.row)"
                >删除</el-button
              >
              <el-button
                size="mini"
                class="addUser"
                @click="editCar(scope.$index, scope.row)"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 修改对话框 -->
        <el-dialog
          title="修改车辆信息"
          :visible.sync="dialogFormVisible2"
          width="30%"
          center
        >
          <el-form :model="editobj">
            <el-form-item label="车辆号码">
              <el-input
                autocomplete="off"
                v-model="editobj.carNumber"
              ></el-input>
            </el-form-item>
            <el-form-item label="车辆类型">
              <el-select
                v-model="getTypeList1.id"
                placeholder="请选择车辆类型"
                size="small"
              >
                <el-option
                  v-for="item in getTypeList1"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="载重"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-input
                v-model="editobj.capacity"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="发动机号">
              <el-input
                v-model="editobj.engineNumber"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="选择状态">
              <el-select
                ref="status"
                v-model="arr.status"
                placeholder="请选择状态"
                size="small"
              >
                <el-option
                  :key="item.id"
                  v-for="item in arr"
                  :label="item.label"
                  :value="item.status"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注"
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-input v-model="editobj.comment" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="update">确定</el-button>
          </div>
        </el-dialog>
      </el-main>
      <el-footer>
        <!-- 分页 -->
        <div class="block" style="float: right">
          <el-pagination
            @size-change="SizeChange"
            @current-change="CurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="pagesizes"
            layout="total, prev, pager, next,sizes"
            :total="carData.length"
          >
          </el-pagination>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import qs from 'qs';
import car from '../../api/car.js';
// import car from '../../api/car.js'
export default {
  data() {
    return {
      dialogFormVisible1: false,
      dialogFormVisible2: false,

      form1: {
        carNumber: ''
      },
      car: {
        number: '',
        class: '',
        status: ''
      },
      // xinzeng: false,
      getTypeList1: [],
      arr: [
        { label: '正常', status: 1 },
        { label: '维修', status: 0 }
      ],

      active: '',
      count: '0',
      carData: [
        // {
        //   carNumber: 1,
        //   carType: 1,
        //   capacity: 1,
        //   engineNumber: 1,
        //   status: 1,
        //   comment: 1,
        // },
      ],
      // tableData: [],
      multipleSelection: [],
      currentPage: 1,
      pagesizes: 10, //当前选择的每页条数
      editobj: {
        carNumber: '',
        capacity: '',
        engineNumber: '',
        comment: ''
      },
      xz: {
        carNumber: '',
        capacity: '',
        engineNumber: '',
        comment: ''
      },
      id: ''
    };
  },
  created() {
    this.getAllCar();
    this.getType();
  },

  computed: {
    tableData() {
      return this.carData.slice(
        (this.currentPage - 1) * this.pagesizes,
        this.currentPage * this.pagesizes
      );
    }
  },
  methods: {
    show(row) {
      if (row.status) {
        return '正常';
      } else {
        return '维修';
      }
    },

    chaxun() {
      console.log(this.form1.carNumber);
      console.log(this.getTypeList1.id);
      console.log(this.arr.status);
      car
        .chaXun(this.form1.carNumber, this.getTypeList1.id, this.arr.status)
        .then(res => {
          console.log(res.data.data.carLists);
          this.carData = res.data.data.carLists;
        })
        .catch(function(err) {
          console.log(err);
        });
    },

    chongzhi() {
      console.log('chongzhi!');
      this.form1.carNumber = '';
      this.getType();
      this.arr = [];
      this.$refs.status.query = '';
      this.arr = [
        { label: '正常', status: 1 },
        { label: '维修', status: 0 }
      ];
    },

    xinzeng() {
      this.dialogFormVisible1 = true;
      console.log(this.xz.carNumber);
      console.log(this.getTypeList1.id);
      console.log(this.arr.status);

      car
        .xinZeng(
          this.xz.carNumber,
          this.getTypeList1.id,
          this.xz.capacity,
          this.xz.engineNumber,
          this.arr.status,
          this.xz.comment
        )
        .then(res => {
          console.log(res);

          this.dialogFormVisible1 = false;
          window.location.reload();
          //刷新页面
          // this.carData=res.data.data.carLists;
        });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    mouseOver: function() {
      this.active = 'background-color: rgb(179, 216, 255)';
    },
    mouseLeave: function() {
      this.active = '';
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    editCar(index, v) {
      this.dialogFormVisible2 = true;
      this.id = v.id;
      console.log(v.id);
    },

    //页面修改
    update() {
      console.log(this.id);
      console.log(this.editobj.carNumber);
      console.log(this.getTypeList1.id);
      console.log(this.editobj.capacity);
      console.log(this.editobj.engineNumber);
      console.log(this.arr.status);
      console.log(this.editobj.comment);
      car
        .updateCar(
          this.id,
          this.editobj.carNumber,
          this.getTypeList1.id,
          this.editobj.capacity,
          this.editobj.engineNumber,
          this.arr.status,
          this.editobj.comment
        )
        .then(res => {
          this.dialogFormVisible2 = false;
          location.reload();
          console.log(res.data);
        });
    },
    // 页面假删除
    del(index, rows) {
      rows.splice(index, 1);
    },
    Delete(index, rows) {
      if (confirm('确定要删除吗') == true) {
        let id = rows.id;
        //网络请求获取数据axios
        console.log(id);
        car
          .deleteCar(id)
          .then(res => {
            //请求成功，方法回调
            //回调方法不能用this
            console.log(res.data);
            this.del(index, rows);
            this.carData = res.data.carLists;
            window.location.reload();
            // console.log(this.newsList);
          })
          .catch(function(err) {
            //请求失败
            console.log('失败了' + err);
          });
      }
    },
    getAllCar() {
      car
        .getCarList()
        .then(res => {
          this.carData = res.data.data.carLists;
        })
        .catch(() => {});
    },
    getType() {
      car
        .getTypeList()
        .then(res => {
          this.getTypeList1 = res.data.data.carTypes;
        })
        .catch(() => {});
    },

    CurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    SizeChange(pagesizes) {
      this.pagesizes = pagesizes;
    }
  }
};
</script>
<style scoped>
.carlist {
  background-color: #fff;
}
.carlist .el-header .el-input {
  width: 150px;
}
.carlist .el-header .el-select .el-input {
  width: 140px;
}
.carlist .el-dialog {
  height: 550px;
}
.carlist .el-dialog .el-form .el-input .el-input__inner {
  left: 40px;
}
.carlist .el-dialog .el-form .el-input {
  padding-left: 20px;
  width: 250px;
}
.el-form-item__content .el-select {
  padding-left: 20px;
  width: 250px;
}
</style>
